<template>
  <div>
    <template>
      <div>
        <a-card style="width: 100%">
          <!-- 利用插槽 制作表头 开始 -->
          <div slot="title">
            <span>文章列表</span>
            <a-button type="primary"
                      :style="{ margin: '0 17px' }"
                      @click="add">增加文章</a-button>
          </div>
          <!-- 利用插槽 制作表头 结束 -->

          <!-- 列表布局 -->
          <a-table :columns="columns"
                   :data-source="artList"
                   rowKey='id'
                   :pagination="{
                    total: this.total,
                    current: this.current,
                    pageSize: this.pageSize,
                  }"
                   @change="change">

            <a slot="name"
               slot-scope="text">{{ text }}</a>
            <span slot="customTitle">
              <a-icon type="smile-o" /> Name
            </span>
            <span slot="tags"
                  slot-scope="tags">
              <a-tag v-for="tag in tags"
                     :key="tag"
                     :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
            <span slot="action"
                  slot-scope="text, record">
              <a>Invite 一 {{ record.name }}</a>
              <a-divider type="vertical" />
              <a>Delete</a>
              <a-divider type="vertical" />
              <a class="ant-dropdown-link"> More actions
                <a-icon type="down" />
              </a>
            </span>
            <!-- 使用插槽 放入照片 -->
            <span slot="thumb"
                  slot-scope="text, record">
              <img :src="record.thumb" />
            </span>

            <!-- 插槽使用 放入操作按钮开始 -->
            <div slot="operate"
                 slot-scope="text, record">
              <a-button type="primary"
                        size="small"
                        :style="{ marginRight: '17px' }"
                        @click="edit(record.id)">
                编辑</a-button>
              <a-button type="danger"
                        size="small"
                        @click="del(record.id)">删除</a-button>
            </div>
            <!-- /使用插槽 放置操作按钮 -->
          </a-table>
          <!-- /列表布局 -->
        </a-card>
      </div>
    </template>

  </div>
</template>

<script>
import { fetchArtList, delArt } from 'api'

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc'
  },
  {
    title: '作者',
    dataIndex: 'author',
    key: 'author'
  },
  {
    title: '封面图片',
    dataIndex: 'thumb',
    key: 'thumb',
    scopedSlots: { customRender: 'thumb' }
  },
  {
    title: '阅读次数',
    key: 'readTimes',
    dataIndex: 'readTimes'
  },
  {
    title: '创建时间',
    key: 'createdTime',
    dataIndex: 'createdTime'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'operate' },
    key: 'operate'
  }
]

export default {
  data () {
    return {
      columns,
      artList: [],
      total: 100, // 分页器中的数据
      current: 1, // 默认是 第一页的内容
      pageSize: 3 // 默认 一页内容有多少条
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 增加 按钮
    add () {
      this.$router.push('/admin/artadd')
    },
    // 编辑 按钮
    edit (id) {
      // console.log(id)
      this.$router.push(`/admin/artEdit/${id}`)
    },
    // 删除 按钮
    del (id) {
      // console.log(id)
      // alert('del')
      // 直接调用 删除的方法
      // delArt(id).then(res => {
      //   console.log(res, 'delArt')
      // })
      // 利用挂载到 原型上的 模态框
      this.$confirm({
        title: '确认删除吗?',
        onOk: () => {
          delArt(id).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('删除成功', 1, () => {
                this.$router.go(0)
              })
            }
          })
        },
        onCancel () { }
      })
    },
    // 点击分页器切换分页的方法
    change (page, pageSize) {
      // console.log(page.current, page.pageSize)
      this.current = page.current
      this.pageSize = page.pageSize
      this.getList()
    },

    getList () {
      // 获取文章列表 信息的方法
      fetchArtList().then((res) => {
        // console.log(res, 'fetchArtList')
        if (res.data.code === 200) {
          this.artList = res.data.data.artList // 控制列表
          this.total = res.data.data.count
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
